<template>
    <div class="container">
        <div class="tip-container">
            <span class="text">
                {{alertText}}
            </span>
            <div class="btn" @click="closeTip">
                确定
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AlertTip",
        props:{
            alertText:String
        },
        methods:{
            closeTip(){
                //分发一个事件
                this.$emit('closeTip')
            }
        }
    }
</script>

<style scoped lang="scss">
  .container{ position:absolute;width: 100%;height: 100%;background: rgba(102, 102, 102, 0.31);text-align: center;z-index: 999;top: 0;
      .tip-container{position:relative;width: 60%;height: 30%;background: #51da63;margin-top: 35%;text-align: center;
          .text{position: absolute;margin-top: 20%}
          .btn{position: absolute;bottom: 0;width: 100%;background: red}
      }
  }
</style>